Data tables can be
very useful
components for
conveying
complicated
information. These
components can be
difficult or
impossible to
navigate for
keyboard only and
screen reader users
when not built using
established design
patterns.
The data table has
the following
issues:
-
Does not
use
<th>
elements.
Uses
headings
instead.
-
-
Missing
attributes:
role(s),
colspan,
rowspan
-
Rows not
correctly
associated
to
headers
-
Some text
is
hard-coded
as all caps
in the HTML.
This can
lead screen
readers to
announce the
words in
acronyms and
is more
difficult to
read for
people with
dyslexia.
Ensure that data
tables are
well-formed:
-
Use a
<caption>
element to
label the
table. For
ARIA based
tables, use
an ARIA
labeling
method such
as
aria-labelledby.
-
Use a
<tr>
element for
each row, or
the row role
for rows in
ARIA based
tables.
-
Use the
<th>
element for
row and
column
headers. To
indicate
what
dimension
the header
applies to,
the
scope=col
and
scope=row
attributes
for row
headers are
implied by
user agents
assistive
technology
so are
generally
not needed.
For ARIA
based
tables, use
the
columnheader
and
rowheader
roles.
-
Use the
<td>
element for
each cell
(or an
element with
a cell role
for ARIA
based
tables,
gridcell if
using the
grid
role).
Additionally,
remove headings. We
recommend using
sentence case. If
this is
unachievable, then
use sentence case in
the HTML and use CSS
text-transform to
transform the text
to uppercase.
The following shows
a simple HTML
table:
<table>
<caption>Contact
Information</caption>
<tr>
<td></td>
<th>Name</th>
<th>Phone#</th>
<th>Fax#</th>
<th>City</th>
</tr>
<tr>
<td>1.</td>
<th>Joel
Garner</th>
<td>412-212-5421</td>
<td>412-212-5400</td>
<td>Pittsburgh</td>
</tr>
<tr>
<td>2.</td>
<th>Clive
Lloyd</th>
<td>410-306-1420</td>
<td>410-306-5400</td>
<td>Baltimore</td>
</tr>
<tr>
<td>3.</td>
<th>Gordon
Greenidge</th>
<td>281-564-6720</td>
<td>281-511-6600</td>
<td>Houston</td>
</tr>
</table>
The following shows
the same structure
but achieved through
ARIA table
roles:
<div
role="table"
aria-labelledby="Caption">
<div
id="Caption">Contact
Information</div>
<div
role="columnheader">Name</div>
<div
role="columnheader">Phone#</div>
<div
role="columnheader">Fax#</div>
<div
role="columnheader">City</div>
<div
role="cell">1.</div>
<div
role="rowheader">Joel
Garner</div>
<div
role="cell">412-212-5421</div>
<div
role="cell">412-212-5400</div>
<div
role="cell">Pittsburgh</div>
<div
role="cell">2.</div>
<div
role="rowheader">Clive
Lloyd</div>
<div
role="cell">410-306-1420</div>
<div
role="cell">410-306-5400</div>
<div
role="cell">Baltimore</div>
<div
role="cell">3.</div>
<div
role="rowheader">Gordon
Greenidge</div>
<div
role="cell">281-564-6720</div>
<div
role="cell">281-511-6600</div>
<div
role="cell">Houston</div>